<div class="crayons-card notification">
  <% json_data = notification.json_data %>
  <% cache "activity-profile-pic-#{json_data['user']['id']}-#{json_data['user']['profile_image_90']}" do %>
    <%= render "notifications/shared/profile_pic", json_data: json_data %>
  <% end %>

  <div class="notification__content">
    <% params = { user: link_to(json_data["user"]["name"], json_data["user"]["path"], class: "crayons-link fw-bold"), title: link_to(h(json_data["comment"]["commentable"]["title"]), json_data["comment"]["commentable"]["path"], class: "crayons-link fw-bold") } %>
    <% if notification.action.blank? %>
      <% if json_data["comment"]["created_at"] %>
        <header class="mb-4">
          <h2 class="fs-base fw-normal">
            <% if json_data["comment"]["depth"] && json_data["comment"]["depth"] > 0 %>
              <%= t("views.notifications.comment.replied_html", **params) %>
            <% else %>
              <%= t("views.notifications.comment.commented_html", **params) %>
            <% end %>
          </h2>
          <p class="lh-tight"><a href="<%= json_data["comment"]["path"] %>" class="crayons-link fs-s crayons-link--secondary"><%= time_ago_in_words json_data["comment"]["created_at"], scope: :"datetime.distance_in_words_ago" %></a></p>
        </header>
      <% end %>

      <%= render "notifications/shared/comment_box", notification: notification, context: "default" %>

    <% elsif notification.action == "Moderation" %>
      <% new_user = mod_comment_user(json_data) %>
      <header class="mb-4">
        <h2 class="fs-xl"><%= t("views.notifications.comment.mod_greeting", user: @user.name) %></h2>
        <p class="mb-4"><%= t("views.notifications.comment.welcome_html", user: new_user["name"]) %></p>
        <p><%= t("views.notifications.comment.commented_html", user: link_to(new_user["name"], new_user["path"], class: "crayons-link fw-bold"), title: params[:title]) %></p>
      </header>

      <%= render "notifications/shared/comment_box", json_data: json_data, notification: notification, context: "default" %>

      <div class="flex justify-between fs-s color-base-60 pt-4">
        <p><%= t("views.notifications.comment.mod_opt_out") %></p>
        <%= link_to t("views.notifications.comment.change_settings"), user_settings_path(:notifications) %>
      </div>

    <% elsif notification.action == "First" %>
      <header class="mb-4">
        <h2 class="fs-base fw-normal">
          <%= t("views.notifications.comment.first_html", **params) %>
        </h2>
        <p class="lh-tight"><small class="fs-s color-base-60"><%= time_ago_in_words notification.created_at, scope: :"datetime.distance_in_words_ago" %></small></p>

        <p><%= t("views.notifications.comment.first_reply") %></p>
      </header>

      <%= render "notifications/shared/comment_box", activity: activity, context: "moderation" %>

    <% end %>
  </div>
</div>
